<template>
  <view class="register-page">
    <!-- 顶部背景图片盒子 -->
    <view class="register-bg-top">
      <image src="/static/img/topBg.png" mode="widthFix" class="bg-img" />
    </view>
    
    <view class="register-content" :class="{ 'fade-out': registering }">
      <!-- Swiper组件 -->
      <view class="swiper-container">
        <swiper
          :current="currentStep"
          :vertical="true"
          :duration="300"
          :circular="false"
          :autoplay="false"
          @change="handleStepChange"
          class="vertical-swiper"
        >
          <!-- 第一步：公司名称和姓名 -->
          <swiper-item>
            <view class="step-content">
              <view class="step-title">基本信息</view>
              <view class="form-group">
                <view class="input-wrapper">
                  <image src="/static/img/company-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="companyName" 
                    :disabled="registering"
                    placeholder="公司名称" 
                    class="register-input" 
                    maxlength="24"
                  />
                </view>
                <view class="input-wrapper">
                  <image src="/static/img/user-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="realName" 
                    :disabled="registering"
                    placeholder="姓名" 
                    class="register-input" 
                    maxlength="24"
                  />
                </view>
              </view>
            </view>
          </swiper-item>
          
          <!-- 第二步：手机号、密码、邀请码、协议 -->
          <swiper-item>
            <view class="step-content">
              <view class="step-title">账号信息</view>
              <view class="form-group">
                <view class="input-wrapper">
                  <image src="/static/img/phone-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="mobile" 
                    :disabled="registering"
                    placeholder="手机号" 
                    class="register-input" 
                    maxlength="11" 
                    type="number"
                  />
                </view>
                <view class="input-wrapper">
                  <image src="/static/img/password-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="password" 
                    :disabled="registering"
                    :type="showPwd ? 'text' : 'password'" 
                    placeholder="输入密码" 
                    class="register-input"
                    maxlength="20"
                  />
                  <view class="eye-icon" @click="onEyeClick">
                    <image :src="showPwd ? '/static/img/open-view.png' : '/static/img/close-view.png'" class="eye-img" mode="widthFix" />
                  </view>
                </view>
                <view class="input-wrapper">
                  <image src="/static/img/password-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="confirmPassword" 
                    :disabled="registering"
                    :type="showConfirmPwd ? 'text' : 'password'" 
                    placeholder="确认密码" 
                    class="register-input"
                    maxlength="20"
                  />
                  <view class="eye-icon" @click="onConfirmEyeClick">
                    <image :src="showConfirmPwd ? '/static/img/open-view.png' : '/static/img/close-view.png'" class="eye-img" mode="widthFix" />
                  </view>
                </view>
                <view class="input-wrapper">
                  <image src="/static/img/invite-code-icon.png" class="input-icon" mode="widthFix" />
                  <input 
                    v-model="inviteCode" 
                    :disabled="registering"
                    placeholder="邀请码" 
                    class="register-input" 
                    maxlength="20"
                  />
                </view>
              </view>
              
              <!-- 协议勾选 -->
              <view class="protocol-section">
                <view class="protocol-row">
                  <view class="checkbox-border circle">
                    <tn-checkbox 
                      v-model="checked" 
                      :disabled="registering" 
                      size="sm" 
                      active-color="#1ec8e1" 
                      inactive-color="#bbb" 
                      checked-shape="circle" 
                    />
                  </view>
                  <text>我已阅读并同意</text>
                  <text class="protocol-link" @click="mygo('/pages/minePages/userAgreement')">《用户协议》</text>
                  <text>和</text>
                  <text class="protocol-link" @click="mygo('/pages/minePages/privacyPolicy')">《隐私协议》</text>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    
    <!-- 按钮区域 -->
    <view class="btn-wrapper" :class="{ 'register-animating': registering }">
      <!-- 第一步按钮 -->
      <button
        v-if="currentStep === 0"
        class="register-btn"
        @click="nextStep"
        :disabled="registering"
      >
        <span>下一步</span>
      </button>
      
      <!-- 第二步按钮 -->
      <button
        v-if="currentStep === 1"
        class="register-btn"
        @click="register"
        :disabled="registering"
      >
        <span>{{ registering ? '正在注册...' : '注册' }}</span>
      </button>
    </view>
    
    <!-- 返回登录按钮 -->
    <view class="back-login" :class="{ 'fade-out': registering }">
      <text @click="mygo('/pages/login')">已有账号？返回登录</text>
    </view>
    
    <!-- 底部背景图片盒子 -->
    <view class="register-bg-bottom">
      <image src="/static/img/bottomBg.png" mode="widthFix" class="bg-img" />
    </view>
  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { mygo } from '@/utils/useNavigator';
import { createRequest } from '@/utils/request';
import { 
  validateName, 
  validatePassword, 
  validatePhone,
  showValidationError 
} from '@/utils/validators';
// 响应式数据
const currentStep = ref(0);
const companyName = ref('');
const realName = ref('');
const mobile = ref('');
const password = ref('');
const confirmPassword = ref('');
const inviteCode = ref('');
const showPwd = ref(false);
const showConfirmPwd = ref(false);
const checked = ref(false);
const registering = ref(false);

let eyeTimer = null;
let confirmEyeTimer = null;

// 处理步骤切换
const handleStepChange = (e) => {
  currentStep.value = e.detail.current;
};

// 下一步
const nextStep = () => {
  // 直接切换到下一步，不进行验证
  currentStep.value = 1;
};

// 验证函数已移至 utils/validators 中

// 注册
const register = async () => {
  // 验证所有字段（包括第一步的字段）
  if (!showValidationError(validateName(companyName.value, '公司名称'))) {
    return;
  }
  if (!showValidationError(validateName(realName.value, '姓名'))) {
    return;
  }
  if (!showValidationError(validatePhone(mobile.value))) {
    return;
  }
  if (!showValidationError(validatePassword(password.value, '密码'))) {
    return;
  }
  if (!showValidationError(validatePassword(confirmPassword.value, '确认密码'))) {
    return;
  }
  if (password.value !== confirmPassword.value) {
    uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
    return;
  }
  if (!showValidationError(validatePassword(inviteCode.value, '邀请码', 4, 20))) {
    return;
  }
  if (!checked.value) {
    uni.showToast({ title: '请先同意协议', icon: 'none' });
    return;
  }
  
  registering.value = true;
  
  try {
    // 构建注册请求数据
    const requestData = {
      companyName: companyName.value,
      realName: realName.value,
      mobile: mobile.value,
      password: password.value,
      code: inviteCode.value
    };
    // 调用真实注册接口
    const response = await createRequest('/auth/register', {
      method: 'POST',
      data: requestData
    });
    // 注册成功
    uni.showToast({ title: response.msg});
    // 延迟跳转到登录页
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
    
  } catch (error) {
    uni.showToast({ 
      title: error.message, 
      icon: 'none' 
    });
  } finally {
    registering.value = false;
  }
};

// 密码显示切换
const onEyeClick = () => {
  if (registering.value) return;
  showPwd.value = true;
  if (eyeTimer) clearTimeout(eyeTimer);
  eyeTimer = setTimeout(() => {
    showPwd.value = false;
    eyeTimer = null;
  }, 4000);
};

// 确认密码显示切换
const onConfirmEyeClick = () => {
  if (registering.value) return;
  showConfirmPwd.value = true;
  if (confirmEyeTimer) clearTimeout(confirmEyeTimer);
  confirmEyeTimer = setTimeout(() => {
    showConfirmPwd.value = false;
    confirmEyeTimer = null;
  }, 4000);
};

// 组件卸载时清理定时器
onUnmounted(() => {
  if (eyeTimer) {
    clearTimeout(eyeTimer);
    eyeTimer = null;
  }
  if (confirmEyeTimer) {
    clearTimeout(confirmEyeTimer);
    confirmEyeTimer = null;
  }
});
</script>

<style scoped lang="scss">
.register-page {
  min-height: 100vh;
  width: 100vw;
  background: #172869;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 48rpx 0 rgba(30,60,114,0.18);
}

.register-content {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 48rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.register-title {
  font-size: 60rpx;
  color: #fff;
  margin-bottom: 8rpx;
  text-align: left;
  letter-spacing: 2rpx;
}

.register-subtitle {
  font-size: 28rpx;
  font-weight: 400;
  color: #e0e6f6;
  margin-bottom: 64rpx;
  text-align: left;
}

.swiper-container {
  width: 100%;
  height: 100vh;
}

.vertical-swiper {
  height: 100vh;
  width: 100%;
}

.step-content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 48rpx;
  box-sizing: border-box;
}

.step-title {
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 48rpx;
  text-align: center;
  font-weight: 500;
}

.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #b3d6f7;
  padding: 18rpx 0;
}

.input-icon {
  width: 40rpx;
  margin-right: 24rpx;
  opacity: 0.8;
}

.register-input {
  flex: 1;
  border: none;
  font-size: 32rpx;
  background: transparent;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.register-input::placeholder {
  color: #b3d6f7;
  opacity: 1;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

.eye-img {
  width: 40rpx;
  height: 40rpx;
  display: block;
}

.protocol-section {
  width: 100%;
  margin-top: 48rpx;
}

.protocol-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.checkbox-border.circle {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #4fd2ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  box-sizing: border-box;
}

.protocol-link {
  color: #4fd2ff;
  margin: 0 auto;
}

.btn-wrapper {
  position: fixed;
  bottom: 200rpx;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.btn-wrapper.register-animating {
  transform: translateY(-200rpx);
}

.register-btn {
  width: 660rpx;
  padding: 0;
  height: 80rpx;
  background: linear-gradient(135deg, rgba(79, 210, 255, 0.9) 0%, rgba(58, 141, 222, 0.9) 50%, rgba(79, 210, 255, 0.9) 100%);
  backdrop-filter: blur(40rpx);
  -webkit-backdrop-filter: blur(40rpx);
  color: #fff;
  border: none;
  border-radius: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 12rpx 32rpx 0 rgba(30, 200, 225, 0.18);
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(79, 210, 255, 0.2) 10%,
    rgba(79, 210, 255, 0.4) 25%,
    rgba(79, 210, 255, 0.6) 40%,
    rgba(79, 210, 255, 0.7) 50%,
    rgba(68, 175, 238, 0.6) 60%,
    rgba(58, 141, 222, 0.4) 75%,
    rgba(58, 141, 222, 0.2) 90%,
    transparent 100%
  );
  animation: metalShine 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  z-index: 1;
}

.register-btn span {
  position: relative;
  z-index: 2;
}

@keyframes metalShine {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.back-login {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 120rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  z-index: 10;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

.register-bg-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 416rpx;
  z-index: 0;
  pointer-events: none;
}

.register-bg-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 120rpx;
  z-index: 0;
  pointer-events: none;
}

.bg-img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
  display: block;
}
</style> 